{% extends "base.html" %}
{% block title %}
    添加员工
{% endblock %}
{% block main %}
    <div class="col-10 offset-1">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">员工信息</h3>
            </div>
            <form method="post" id="employeeForm" class="form-horizontal">
                {% csrf_token %}
                <div class="card-body">
                    <div class="form-group">
                        <label>员工编号</label>
                        <input type="text" name="Eid" class="form-control" placeholder="员工编号 (例如：yg10001)">
                    </div>
                    <div class="form-group">
                        <label>员工姓名</label>
                        <input type="text" name="EName" class="form-control" placeholder="员工姓名">
                    </div>
                    <div class="form-group">
                        <label>员工密码</label>
                        <input type="text" name="EPas" class="form-control" placeholder="员工密码" value="000000">
                    </div>
                    <div class="form-group">
                        <label>员工级别</label>
                        <input type="text" name="Elevel" class="form-control" placeholder="员工级别">
                    </div>
                    <div class="form-group">
                        <label>员工电话</label>
                        <input type="text" name="EtelPhone" class="form-control" placeholder="员工电话">
                    </div>
                    <div class="form-group">
                        <label>员工工资</label>
                        <input type="text" name="ESalary" class="form-control" placeholder="员工工资">
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <input type="text" name="other" class="form-control" placeholder="备注">
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-8 offset-2">
                            <button type="submit" class="btn btn-primary btn-block">提交信息</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function () {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });

            $.validator.addMethod("isTelPhone", function (value, element) {
                return this.optional(element) || /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(value);
            }, "手机号码格式不正确");

            $.validator.setDefaults({
                submitHandler: function () {
                    $.ajax({
                        async: true,
                        cache: false,
                        url: "/employee_add",
                        data: $("#employeeForm").serialize(),
                        type: "post",
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 200) {
                                Toast.fire({
                                    icon: 'success',
                                    title: res.message
                                });
                                setTimeout(function () {
                                    window.location.href = '/employee_list';
                                }, 1500);
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: res.message
                                });
                            }
                        }
                    });
                }
            });

            $('#employeeForm').validate({
                rules: {
                    EName: {
                        required: true,
                        minlength: 2,
                        maxlength: 10
                    },
                    EPas: {
                        required: true,
                        minlength: 6,
                        maxlength: 10
                    },
                    Elevel: {
                        required: true,
                        minlength: 2,
                        maxlength: 2
                    },
                    EtelPhone: {
                        required: true,
                        isTelPhone: true
                    },
                    ESalary: {
                        required: true,
                        digits: true,
                        maxlength: 6
                    }
                },
                messages: {
                    EName: {
                        required: '请输入员工姓名',
                        minlength: '员工姓名应在2-10个字符之间',
                        maxlength: '员工姓名应在2-10个字符之间'
                    },
                    EPas: {
                        required: '请输入员工密码',
                        minlength: '员工密码应在6-10个字符之间',
                        maxlength: '员工密码应在6-10个字符之间'
                    },
                    Elevel: {
                        required: '请输入员工级别',
                        minlength: '员工级别应在2个字符',
                        maxlength: '员工级别应在2个字符'
                    },
                    EtelPhone: {
                        required: '请输入员工电话',
                        isTelPhone: '手机号码格式不正确'
                    },
                    ESalary: {
                        required: '请输入员工工资',
                        digits: '员工工资应为数字',
                        maxlength: '员工工资最多6位数字'
                    }
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });
    </script>
{% endblock %}
